<template>
    <div class="">
        <h1 style="padding-top: 30px;">项目列表</h1>
        <div class="top-group">
            <el-button type="primary" @click="onAddProjectButtonClick">
                <el-icon :size="15" style="padding-right: 5px;">
                    <Plus />
                </el-icon>新增项目</el-button>
        </div>

        <!-- 项目列表展示 -->
        <el-table :data="projects" style="width: 100%">
            <el-table-column prop="name" label="项目名称" width="180">
                <template v-slot="scope">
                    <router-link :to="'/project/' + scope.row.id">{{ scope.row.name }}</router-link>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width=100>
            </el-table-column>
            <el-table-column label="最后修改时间">
                <template v-slot="scope">
                    {{ $filters.format(scope.row.last_update_time)}}
                </template>
            </el-table-column>
            <el-table-column prop="description" label="描述">
            </el-table-column>
            <el-table-column label="状态" width="100">
                <template v-slot="scope">
                    <!-- <el-tag type="success" v-if="scope.row.status == true">可用</el-tag>
                    <el-tag type="danger" v-if="scope.row.status == false">禁用</el-tag> -->
                    <el-tag class="ml-2" type="success">可用</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="300">
                <template v-slot="scope">
                    <el-button type="primary" @click="onEditProject(scope.row)" size="mini">编辑</el-button>
                    <el-button type="danger" size="mini" @click="onDeleteProject(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加项目的弹窗 -->
        <el-dialog v-model="addDialogVisiable" title="编辑项目信息">
            <el-form ref="projectForm" :model="projectForm" :rules="projectRules">
                <el-form-item label="项目名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="projectForm.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="项目类型" :label-width="formLabelWidth" prop="type">
                    <el-select v-model="projectForm.type" placeholder="请选择项目类型">
                        <el-option label="web" value="web" />
                        <el-option label="app" value="app" />
                        <el-option label="h5" value="h5" />
                    </el-select>
                </el-form-item>
                <el-form-item label="项目描述" :label-width="formLabelWidth" prop="description">
                    <el-input type="textarea" v-model="projectForm.description" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addDialogVisiable = false">取 消</el-button>
                    <el-button type="primary" @click="onSubmitAddProject" :loading="addProjectButtonLoading">
                        确 定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
    
<script>
// import { ElMessage } from 'element-plus'
export default {
    data: () => ({
        projects: [],
        addDialogVisiable: false,
        addProjectButtonLoading: false,
        dialogType: "add",
        projectForm: {
            name: "",
            type: "",
            description: ""
        },
        projectRules: {
            name: [
                { required: true, message: "请输入项目名称！", trigger: "blur" }
            ],
            type: [
                { required: true, message: "请选择项目类型！", trigger: "blur" }
            ]
        }
    }),
    components: {
        ElMessage
    },
    // 生命周期函数请求项目列表
    mounted() {
        this.$http.getProjectList().then(res => {
            console.log(res)
            const projects = res.data
            this.projects = projects
        })
    },
    methods: {

        sent_message(msg, type) {
            ElMessage({
                message: msg,
                type: type,
            })
        },
        message_box() {
            ElMessageBox.confirm(
                '确定执行此操作?',
                '警告',
                {
                    confirmButtonText: '确 定',
                    cancelButtonText: '取 消',
                    type: 'warning',
                }
            )
        },
        // 初始化表单方法
        initProjectForm() {
            this.projectForm = {
                name: "",
                type: "",
                description: ""
            }
        },
        // 点击添加项目按钮弹出dialog对话框
        onAddProjectButtonClick() {
            this.dialogType = 'add'
            this.addDialogVisiable = true
            this.initProjectForm()
        },
        //点击编辑按钮，带入编辑的项目信息
        onEditProject(project) {
            this.projectForm = {
                name: project.name,
                type: project.type,
                description: project.description,
                id: project.id
            }
            this.addDialogVisiable = true
            this.dialogType = "edit"
        },
        // 删除项目
        onDeleteProject(project) {
            this.projectForm = {
                id: project.id
            }
            ElMessageBox.confirm(
                '确定执行此操作?',
                '警告',
                {
                    confirmButtonText: '确 定',
                    cancelButtonText: '取 消',
                    type: 'warning',
                }
            ).then(() => {
                this.$http.delProject(this.projectForm.id).then(res => {
                    if (res && res.status == 204) {
                        console.log(res)
                        let index = 0
                        for (let loop_project of this.projects) {
                            if (loop_project.id == project.id) {
                                this.projects.splice(index, 1, )
                                console.log(this.projects)
                                break
                            }
                            index++
                        }
                        this.sent_message("删除成功！", "success")
                    }
                })
            }).catch(() => {
                this.sent_message("取消操作！", "info")
            })
        },
        // 新增或修改项目发送请求
        onSubmitAddProject() {
            this.$refs['projectForm'].validate(valid => {
                if (!valid) {
                    return
                }
                this.addProjectButtonLoading = true
                if (this.dialogType == 'add') {
                    this.$http.addProject(this.projectForm).then(res => {
                        console.log(res)
                        this.addProjectButtonLoading = false
                        if (res && res.status == 201) {
                            const project = res.data
                            this.projects.push(project)
                            this.addDialogVisiable = false
                            this.initProjectForm()
                            this.sent_message("项目创建成功！", "success")
                        }
                    })
                } else {
                    this.$http.editProject(this.projectForm.id, this.projectForm).then(res => {
                        this.addProjectButtonLoading = false
                        this.addDialogVisiable = false
                        this.initProjectForm()
                        this.sent_message("项目修改成功！", "success")
                        const project = res.data
                        let index = 0
                        for (let loop_project of this.projects) {
                            if (loop_project.id == project.id) {
                                this.projects.splice(index, 1, project)
                                break
                            }
                            index++
                        }
                    })
                }
            })
        }

    }
}
</script>
    
<style scoped lang='scss'>
.top-group {
    padding: 10px 0;
    text-align: right;
}
</style>